html, body {
    height:100%;
    margin:0px;
	padding:0px;
	min-width: 340px;
	padding-top: 70px;
}

/* * {
    outline: 1px solid red;
} */

/* ============================
   MODERN HEADER STYLES
   ============================ */
.modern-nav {
	background-color: #ffffff;
	border-bottom: 1px solid #e5e5e5;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.modern-nav .navbar-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 22px;
	font-weight: 700;
	color: #2c3e50;
	padding: 15px 20px;
	transition: opacity 0.2s;
}

.modern-nav .navbar-brand:hover {
	opacity: 0.8;
	text-decoration: none;
}

.modern-nav .navbar-brand .fa-pencil {
	color: #3498db;
	font-size: 24px;
}

.brand-text {
	letter-spacing: -0.5px;
}

.brand-vs {
	color: #e74c3c;
	font-weight: 800;
	margin: 0 2px;
}

/* Main Navigation Links */
.navbar-main {
	margin-left: 20px;
}

.navbar-main > li > a {
	color: #555;
	font-weight: 500;
	padding: 25px 18px;
	transition: all 0.2s;
	border-bottom: 3px solid transparent;
}

.navbar-main > li > a:hover {
	color: #3498db;
	background-color: transparent;
	border-bottom-color: #3498db;
}

.navbar-main > li > a i {
	margin-right: 6px;
	opacity: 0.8;
}

/* Create Story CTA Button */
.nav-cta {
	margin: 12px 8px 0 0;
}

.btn-create {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border: none;
	padding: 8px 20px;
	border-radius: 6px;
	font-weight: 600;
	color: white;
	transition: all 0.3s;
	box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.btn-create:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
	color: white;
	background: linear-gradient(135deg, #5a6fd8 0%, #6a3f92 100%);
}

.btn-create i {
	margin-right: 5px;
}

/* Login Button */
.nav-login {
	margin: 12px 0 0 0;
}

.btn-login {
	border: 2px solid #3498db;
	background: transparent;
	color: #3498db;
	padding: 7px 18px;
	border-radius: 6px;
	font-weight: 600;
	transition: all 0.2s;
}

.btn-login:hover {
	background: #3498db;
	color: white;
	border-color: #3498db;
}

/* User Profile Dropdown */
.user-dropdown-nav {
	margin-top: 8px;
}

.user-profile-link {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px !important;
	background-color: transparent !important;
	border: none;
	transition: all 0.2s;
	border-radius: 20px;
}

.user-profile-link:hover,
.user-profile-link:focus {
	background-color: #f8f9fa !important;
	text-decoration: none;
}

.user-avatar-circle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s;
}

.user-profile-link:hover .user-avatar-circle {
	transform: scale(1.05);
}

.user-profile-link .fa-caret-down {
	color: #999;
	font-size: 12px;
}

/* Modern Dropdown Menu */
.modern-dropdown {
	min-width: 240px;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	border: 1px solid #e5e5e5;
	margin-top: 8px;
	padding: 8px 0;
}

.modern-dropdown .dropdown-header {
	padding: 12px 16px;
	color: #666;
	font-weight: 400;
	font-size: 13px;
	border-bottom: 1px solid #f0f0f0;
}

.dropdown-user-info {
	display: flex;
	align-items: center;
	gap: 12px;
}

.user-avatar-large {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 18px;
	text-transform: uppercase;
	flex-shrink: 0;
}

.dropdown-user-info strong {
	display: block;
	color: #2c3e50;
	font-size: 14px;
}

.dropdown-user-info .d-block {
	display: block;
}

.modern-dropdown li a {
	padding: 10px 16px;
	color: #555;
	transition: all 0.15s;
	display: flex;
	align-items: center;
}

.modern-dropdown li a:hover {
	background-color: #f8f9fa;
	color: #3498db;
	padding-left: 20px;
}

.modern-dropdown li a i {
	width: 20px;
	margin-right: 10px;
	text-align: center;
	font-size: 15px;
}

/* Mobile Responsive */
@media (max-width: 767px) {
	.navbar-main {
		margin-left: 0;
	}
	
	.navbar-main > li > a {
		border-bottom: none;
		border-left: 3px solid transparent;
		padding: 12px 20px;
	}
	
	.navbar-main > li > a:hover {
		border-left-color: #3498db;
		border-bottom-color: transparent;
	}
	
	.nav-cta,
	.nav-login,
	.user-dropdown-nav {
		margin: 0;
	}
	
	.btn-create,
	.btn-login {
		display: block;
		width: calc(100% - 30px);
		margin: 10px 15px;
		text-align: center;
	}
	
	.user-profile-link {
		margin: 10px 15px;
		justify-content: center;
	}
}

.height30 {
	height: 30%
}

.height50 {
	height: 50%
}

.nav {
	/* Reset global .nav background to avoid unintended grey bars */
	background-color: transparent;
	height: auto;
	min-width: 340px;
}

/* Page-level contrast and defaults */
body {
	background: #ffffff;
	color: #222222;
}

/* Navbar overrides to ensure good contrast and button-like links */
.navbar-default {
	background-color: #ffffff;
	border-color: #dddddd;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
	color: #333333;
	font-weight: 700; /* make navbar text bold */
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-brand:hover {
	color: #000000;
}

/* Keep button appearance consistent in navbar */
.navbar-btn.topBtn,
.nav .btn {
	border-radius: 6px;
	padding: 6px 12px;
	box-shadow: none;
}

.nav-icon { margin-right: 8px; font-size: 16px; vertical-align: middle; }
.nav-label { display: inline; }
.navbar-btn.topBtn {
	background-color: #337ab7;
	color: #ffffff;
	border: 1px solid #2e6da4;
}
.navbar-btn.topBtn:hover {
	background-color: #286090;
	color: #ffffff;
}

/* ensure navbar buttons sit lower to align with navbar height */
.navbar-btn.topBtn {
	margin-top: 6px;
}

/* Add consistent horizontal spacing between navbar items */
.navbar-btn.topBtn,
.navbar-brand-link,
.navbar-default .navbar-nav > li {
	margin-right: 8px;
}
.navbar-default .navbar-nav > li { /* ensure visual spacing without breaking layout */
	padding-left: 2px;
	padding-right: 2px;
}

/* Disabled/greyed profile button */
.navbar-btn[disabled],
.navbar-btn[disabled]:hover,
.navbar-btn[disabled]:active {
	background-color: #f5f5f5;
	color: #777777;
	border-color: #dddddd;
	opacity: 1;
}

/* Make the brand button match size of other navbar buttons */
.navbar-brand-link {
	font-size: 14px;
	padding: 6px 12px;
	line-height: 1.2;
	margin-top: 6px;
	display: inline-block;
	vertical-align: middle;
	/* Make brand look like other navbar buttons (small blue rounded rectangle) */
	background-color: #337ab7 !important;
	color: #222222 !important;
	border: 1px solid #2e6da4 !important;
	border-radius: 6px !important;
}

/* Icon-first compact mode for medium widths */
@media (max-width: 900px) and (min-width: 601px) {
	.navbar-btn.topBtn { padding: 6px 8px; font-size: 13px; }
	.nav-icon { margin-right: 0; font-size: 16px; }
	.nav-label { display: none; }
	.navbar-brand-link { padding: 6px 8px; font-size: 13px; }
	.navbar-default .navbar-nav > li { margin-right: 6px; }
}

/* When space is tighter, hide less-important items in order */
@media (max-width: 760px) {
	/* drop-first: Reddit link disappears first */
	.drop-first { display: none !important; }
}

/* If you'd like a second item to drop at a smaller width, uncomment and use drop-second class */
/*
@media (max-width: 700px) {
	.drop-second { display: none !important; }
}
*/

/* Brand hover: slightly darker blue */
.navbar-brand-link:hover {
	background-color: #286090 !important;
	color: #ffffff !important;
}

footer {
	background-color:rgba(199, 0,57, 0.8);
	height:70px; 
	min-width: 340px;
	color:white;
}

.main-wrapper {
	box-sizing: border-box;
	min-height: 100%;
	position: relative;
	margin:0px;
	padding:0px;
	padding-top:50px;
	padding-bottom: 70px;
}

footer {
    clear: both;
	position: absolute;
	vertical-align: middle;
	margin-bottom: 0;
	bottom:0;
	width: 100%;
}

.smallImg {
	height: 25px;
	width: 25px;
}

#spacing{
	margin-bottom: 20px;
}

.column{
	float:left;
	margin:10px;
	border: solid 1px black;
	padding:20px;
	border-radius: 10px;
}

#startHere{
	padding-left: 35px;
	padding-right:35px;
	padding-top: 15px;
	padding-bottom: 15px;
	/* padding:30px; */
	color: black;
	border: 2px solid green;	
	background: white;
	/* font-weight:bold; */
	font-size: 25px;
}

#startHere:hover {
	background:green;
	color:white;
	
}

.separation{
	border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

#headerStyle{
	margin-left: 10px;
}

#genreStyle{
	margin-right:15px;
}

#genreButton{
	background:#FF5733;
	color:white;
	padding-left:20px;
	padding-right:20px;
}

#genreButton:hover{
	background: #ff8c00;
}

#editButton{
	border: 2px solid #FF5733;	
}

#editButton:hover{
	background: #FF5733;
	border:none;
	color:white;
}

#writeToggle{
	border: 2px solid #337ab7;
	background:white;
	color:black
}

#writeToggle:hover{
	background: #286090;
	border:none;
	color:white;
}

#voteToggle{
	background: #C70039;
	color:white;	
}

.indexColumn{
	border: 1px dashed #C70039;
}

.updateStoryStatus {
	border: 2px solid #449d44;
	background: white;
	color:black;
}

.updateStoryStatus:hover{
	border:none;
}

#genreResultsStyle{
	background: white;
	border-radius: 10px;
	border:2px dashed #C70039;
	padding:30px;
	z-index: 1;
	position: absolute;
	opacity: 0.7
}

#booksIllustration{
	width: 100%;
	opacity: 0.4;
	position: relative;
}

#createStory{
	margin-top:20px;	
	border: 2px solid #337ab7;
	background:white;
	color:black
}

#createStory:hover{
	background: #286090;
	border:none;
	color:white;
	padding:20px;
}

.columnCreate{
	border: 1px dashed	#FF7F50;
}

#updateStory{
	margin-top:20px;
	border: 1px solid #FF7F50;
	background: white;
}

#updateStory:hover{
	border:none;
	background:	#FFD700;
	padding:20px;
}

.topBtn:hover{
	background:	#FFD700;
	color:black;
}

#lineSubmission{	
	background: #ff8c00;
	margin-bottom:20px;
	color:black;
}

#lineSubmission:hover{
	background:	#FFD700;
	border: none;
	color:white;
}

.storySpecs{
	border-bottom: 1px orange solid;
}

.readSpecs{
	margin-top:15px;
	border-left: 1px orange dashed;
	border-right: 1px orange dashed;
	border-bottom: 1px orange dashed

}

.scrollbar
{
	margin-right: 5px;
	float: right;
	height: 300px;
	width: 100%;
	background: white;
	overflow-y: scroll;
	margin-bottom: 10px;
}


#style-10::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#style-10::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-10::-webkit-scrollbar-thumb
{
	background-color: orange;
	border-radius: 10px;
	background-image: -webkit-linear-gradient(90deg,
	    rgba(0, 0, 0, .2) 25%,
		transparent 25%,
		transparent 50%,
		rgba(0, 0, 0, .2) 50%,
		rgba(0, 0, 0, .2) 75%,
		transparent 75%,
		transparent)
}

.aboutThisStory{
	border-bottom: 3px dashed green;
	margin-bottom: 10px;
}

.seeLinesAccepted{
	border-left:1px dashed green;
	border-right: 1px dashed green;
	border-bottom: 1px dashed green;
	margin-bottom:10px;
}

#style-15::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#style-15::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-15::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #FFF;
	background-image: -webkit-gradient(linear,
		40% 0%,
		75% 84%,
		from(#4D9C41),
		to(#19911D),
		color-stop(.6,#54DE5D))
}


.votedLinesContainer{
	margin-bottom:20px;
}

/* Smooth Page Transitions */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.main-wrapper {
	animation: fadeIn 0.3s ease-out;
}

.panel, .column, .well {
	animation: fadeIn 0.4s ease-out;
}

/* Smooth transitions for interactive elements */
.btn, a {
	transition: all 0.2s ease;
}

/* Countdown timer styling */
.countdown-timer {
	display: inline-block;
	padding: 8px 16px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border-radius: 20px;
	font-weight: 600;
	font-size: 14px;
	margin-left: 10px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.countdown-timer.urgent {
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	animation: pulse 1s infinite;
}

@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

/* User Avatar & Dropdown Styles */
.user-menu-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px !important;
	margin-top: 6px;
	background-color: transparent !important;
	border: none !important;
	cursor: pointer;
	transition: background-color 0.2s;
}

.user-menu-toggle:hover,
.user-menu-toggle:focus {
	background-color: rgba(0, 0, 0, 0.05) !important;
	text-decoration: none;
}

.user-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	flex-shrink: 0;
}

.user-name-hover {
	display: none !important;
}

.user-menu-toggle .caret {
	margin-left: 4px;
	color: #666;
}

.user-dropdown {
	min-width: 180px;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border: 1px solid #ddd;
	margin-top: 4px;
}

.user-dropdown .dropdown-header {
	color: #666;
	font-weight: 600;
	padding: 8px 20px;
	font-size: 13px;
}

.user-dropdown li a {
	padding: 8px 20px;
	color: #333;
	transition: background-color 0.15s;
}

.user-dropdown li a:hover {
	background-color: #f5f5f5;
}

.user-dropdown li a i {
	width: 18px;
	margin-right: 8px;
	text-align: center;
}

/* ============================
   VOTING INTERFACE STYLES
   ============================ */
.voting-container {
	max-width: 800px;
	margin: 40px auto;
	padding: 20px;
}

.story-context-card {
	background: white;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.story-context-card .card-header {
	background: #f8f9fa;
	padding: 15px 20px;
	border-bottom: 1px solid #ddd;
	border-radius: 8px 8px 0 0;
}

.story-context-card .card-body {
	padding: 20px;
}

.story-text p {
	line-height: 1.8;
	margin-bottom: 15px;
	color: #333;
}

.vote-progress {
	color: #667eea;
	font-weight: 600;
	margin-bottom: 10px;
}

.line-card-container {
	perspective: 1000px;
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 40px 0;
}

.line-card {
	background: white;
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
	padding: 60px 40px;
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	animation: slideIn 0.4s ease-out;
	width: 100%;
}

.line-card-content {
	text-align: center;
	position: relative;
}

.quote-icon {
	color: #667eea;
	opacity: 0.3;
	font-size: 36px;
}

.quote-icon.fa-quote-left {
	position: absolute;
	top: -20px;
	left: -20px;
}

.quote-icon.fa-quote-right {
	position: absolute;
	bottom: -20px;
	right: -20px;
}

.line-text {
	font-size: 24px;
	line-height: 1.6;
	color: #333;
	margin: 20px 0;
	font-weight: 400;
	max-width: 600px;
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: scale(0.9) translateY(20px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.line-card.slide-out-left {
	animation: slideOutLeft 0.3s ease-in forwards;
}

.line-card.slide-out-right {
	animation: slideOutRight 0.3s ease-in forwards;
}

@keyframes slideOutLeft {
	to {
		opacity: 0;
		transform: translateX(-100%) rotate(-10deg);
	}
}

@keyframes slideOutRight {
	to {
		opacity: 0;
		transform: translateX(100%) rotate(10deg);
	}
}

.vote-buttons {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin-top: 40px;
}

.btn-vote {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	border: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 600;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-vote i {
	font-size: 48px;
	margin-bottom: 10px;
}

.btn-reject {
	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
	color: white;
}

.btn-reject:hover {
	background: linear-gradient(135deg, #ee5a6f 0%, #dd4455 100%);
	transform: scale(1.1);
	box-shadow: 0 8px 20px rgba(238, 90, 111, 0.4);
}

.btn-accept {
	background: linear-gradient(135deg, #51cf66 0%, #37b24d 100%);
	color: white;
}

.btn-accept:hover {
	background: linear-gradient(135deg, #37b24d 0%, #2b8a3e 100%);
	transform: scale(1.1);
	box-shadow: 0 8px 20px rgba(55, 178, 77, 0.4);
}

.success-screen {
	padding: 80px 20px;
	text-align: center;
}

.success-icon {
	font-size: 120px;
	color: #51cf66;
	margin-bottom: 30px;
	animation: successPop 0.6s ease-out;
}

@keyframes successPop {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.success-screen h2 {
	color: #333;
	margin-bottom: 15px;
	font-weight: 600;
}

.success-screen .lead {
	color: #666;
	margin-bottom: 10px;
}

.success-screen .btn {
	margin: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.line-card {
		padding: 40px 20px;
		min-height: 250px;
	}
	
	.line-text {
		font-size: 20px;
	}
	
	.btn-vote {
		width: 120px;
		height: 120px;
		font-size: 16px;
	}
	
	.btn-vote i {
		font-size: 36px;
	}
	
	.vote-buttons {
		gap: 20px;
	}
}